<template>
<div class="enum_many-wrapper field">
    <field_title :title_show="!field.hideTitle&&!field.no_title" :field="field" ></field_title>
  <div class="ui inline fields">
    <fselect v-if="enum_val" :fname="`city_code_${field.name}`" :data="enum_val" @selectValsChange='selectEvent' :placeholder="placeholder" :editType="editType"></fselect>
  <draggable element="div" class='field' style="margin-top: 10px;" v-model="citys" :options="dragOptions" :move="onMove" @start="isDragging=true" @end="isDragging=false" @change="hlChange">
    <transition-group type="transition" :name="'flip-list'" tag="div">
      <div v-for="(val,index) in citys" class="ui compact message" :key="index">
        {{val.title}}<i @click="toRemove(index)" class="icon circular tiny remove"></i>
      </div>
    </transition-group>
  </draggable>
  </div>
</div>
</template>

<script type="text/ecmascript-6">
import tool from 'src/util/tool';
import util from '_util/index';
import logic from '_logic';
import fselect from 'components/form/select'
import draggable from 'vuedraggable'
import RP from 'src/util/common/drag';
import field_title from 'components/field/com/field_title';

import _ from 'lodash'

export default {
  data() {
    return {
      city: '',
      val: [],
      data: [],
      enum_val: null,
      citys: [],
      city_data: null,
      editable: true,
      isDragging: false,
      delayedDragging: false
    }
  },
  methods: {

    toRemove(index) {
      this.citys.splice(index, 1);
    },
    hlChange() {},
    onMove({relatedContext, draggedContext}) {
      return RP.onMove(this, relatedContext, draggedContext)
    },
    selectEvent(val,fname,text) {
      if(val){
        this.city = val
        if(_.findIndex(this.citys,['code', val])==-1){
          this.citys.push({
            code:val,
            title:text
          })
        }
      }
    },
  },
  watch: {
    citys: function(val, old) {
      this.$emit('setVo', this.field.name, JSON.stringify(val))
    },
    isDragging(newValue) {
      if (newValue) {
        this.delayedDragging = true
        return
      }
      this.$nextTick(() => {
        this.delayedDragging = false
      })
    }
  },
  components: {
    fselect,
      field_title,
    draggable
  },
  computed: {
    dragOptions() {
      return {
        animation: 0,
        group: 'description',
        disabled: !this.editable,
        ghostClass: 'ghost'
      };
    },
    disableCity(){

    },
    placeholder() {
      return `请选择${this.field.title}`
    },
  },
  props: ['field', 'editType'],
  created() {

    logic.edit.set_enum_val(this)
    if(this.field.fval){
      let arr=JSON.parse(this.field.fval)
      this.citys=arr

    }
  },
  mounted() {
  }
};
</script>

<style rel="stylesheet/less" lang="less" scoped>
  @import "../../common/style/mixin";
  @dir: "field/";
  .enum_many-wrapper{
    .sortMenu();
    .messageIcon();
  }

</style>
